<script setup>
import { onMounted, watch, ref, nextTick } from 'vue';

const props = defineProps({
    stationName: String,
    configInfo: Object,
    routingData: Object,
    idName: String,
    notShowSetting: Boolean,
    notShowSettingBtn: Boolean
})

const routingList = ref([])
const ctx = ref(null)
const preRoutingIndex = ref(-1)
const route = ref(null)
const drawer = ref(false)

const emit = defineEmits(['settingData'])

const initDraw = (name, tracks) => {
    const routeCanvas = document.getElementById(props.idName);
    ctx.value = routeCanvas.getContext('2d');
    ctx.value.clearRect(0, 0, 1000, 400);
    ctx.value.fillStyle = localStorage.getItem('vueuse-color-scheme') == 'dark' ? 'white' : 'black';
    ctx.value.font = 'normal bold 28px serif'
    ctx.value.fillText(name ? name : props.routingData.name, props.routingData.titlePosition[0], props.routingData.titlePosition[1]);
    ctx.value.fillStyle = '#778899';
    ctx.value.fillStyle = '#555'
    props.routingData.stationReact.forEach(react => {
        ctx.value.fillRect(react[0], react[1], react[2], react[3])    
    });
    
    //绘制路径
    ctx.value.beginPath();
    if (props.routingData) {
        props.routingData.lineData.forEach(item => {
            if (item.type == 'moveTo') {
                ctx.value.moveTo(item.value[0], item.value[1]);
            } else {
                ctx.value.lineTo(item.value[0], item.value[1]);
            }
        })
    }
    ctx.value.lineWidth = 10;
    ctx.value.strokeStyle = "#778899";
    ctx.value.stroke();
    //绘制转换轨
    ctx.value.fillStyle = localStorage.getItem('vueuse-color-scheme') == 'dark' ? 'white' : 'black';
    ctx.value.font = 'normal bold 24px serif'
    props.routingData.tracks.forEach(item => {
        ctx.value.fillText(item.name, item.position[0], item.position[1])
    })
}

const getSelectValue = () => {
    return route.value;
}

const setSelectValue = (data) => {
    handleChangeRouting(Number(data))
    route.value = Number(data);
}

const drawRoutingPath = (path, show) => {
    ctx.value.beginPath();
    path.forEach(item => {
        if (item.type == 'moveTo') {
            ctx.value.moveTo(item.value[0], item.value[1]);
        } else {
            ctx.value.lineTo(item.value[0], item.value[1]);
        }
    })
    ctx.value.strokeStyle = show ? '#32CD32' : '#778899';
    ctx.value.lineWidth = 10;
    ctx.value.stroke();
}

const handleChangeRouting = (index) => {
    if (preRoutingIndex.value != -1) {
        let preRoutingData = props.routingData.routing[preRoutingIndex.value];
        drawRoutingPath(preRoutingData.pathData, false);
    }
    if (typeof index == 'number') {
        let routingData = props.routingData.routing[index];
        preRoutingIndex.value = index
        drawRoutingPath(routingData.pathData, true)
    }
}

const clickSettingBtn = () => {
    emit('settingData', props.idName)
}

defineExpose({
    getSelectValue,
    setSelectValue
})

watch(props, (value, oldValue) => {
    initDraw(value.stationName, value.configInfo);
})

onMounted(() => {
    nextTick(() => {
        initDraw(props.stationName, []);
    })
})
</script>

<template>
    <div class="baseStation">
        <div class="toolbar" v-show="!notShowSetting">
            <el-select v-model="route" placeholder="选择交路" @change="handleChangeRouting" clearable>
                <el-option v-for="(item, index) in props.routingData.routing" :key="index" :label="item.name"
                    :value="index"></el-option>
            </el-select>
            <el-button v-show="!notShowSettingBtn" style="margin-left: 10px;" type="info" @click="clickSettingBtn">设置</el-button>
        </div>
        <div class="flag" :style="{ height: props.idName == 'left' || props.idName == 'right' ? '80px' : '0px' }">
            <div v-show="props.idName == 'left'" class="flag-item">下行<img style="margin-left:5px;width: 40px; height: 30px;"
                    src="../assets/jiantouzuo.png" /></div>
            <div v-show="props.idName == 'left'" class="flag-item">上行<img style="margin-left:5px;width: 40px; height: 30px;"
                    src="../assets/jiantouyou.png" /></div>
        </div>
        <canvas style="width: 100%;" :id="props.idName" width="1000" height="400" id="station_canvas"></canvas>
    </div>
</template>

<style scoped>
.baseStation {
    border: 1px solid gray;
}

.toolbar {
    padding: 10px;
    margin-bottom: 10px;
}

.flag {
    display: flex;
    flex-direction: column;
}

.flag-item {
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-left: 10px;
}</style>